<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鱼种识别 - 鱼情助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        .recognition-area {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            border: 3px dashed rgba(255, 255, 255, 0.3);
        }
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航 -->
    <div class="fixed top-0 left-0 right-0 z-50 glass-effect">
        <div class="flex items-center justify-between p-4">
            <a href="index.html" class="text-white text-xl">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-white text-lg font-semibold">鱼种识别</h1>
            <button class="text-white text-xl">
                <i class="fas fa-history"></i>
            </button>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="pt-20 pb-24 px-4">
        <!-- 拍照识别区域 -->
        <div class="recognition-area rounded-3xl p-8 mb-6 text-center text-white" id="recognitionArea">
            <div class="mb-6">
                <i class="fas fa-camera text-6xl mb-4 pulse-animation"></i>
                <h2 class="text-xl font-semibold mb-2">拍照识别鱼种</h2>
                <p class="text-sm opacity-80">将鱼儿对准镜头，AI将自动识别鱼种并提供详细信息</p>
            </div>
            <div class="flex flex-col space-y-3">
                <button class="bg-white/20 backdrop-blur-lg rounded-xl py-3 px-6 font-medium card-hover" onclick="openCamera()">
                    <i class="fas fa-camera mr-2"></i>拍照识别
                </button>
                <button class="bg-white/20 backdrop-blur-lg rounded-xl py-3 px-6 font-medium card-hover" onclick="selectFromGallery()">
                    <i class="fas fa-image mr-2"></i>从相册选择
                </button>
            </div>
        </div>

        <!-- 识别结果区域（隐藏） -->
        <div id="resultArea" class="hidden">
            <div class="glass-effect rounded-2xl p-4 mb-6 text-white">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">识别结果</h2>
                    <button class="text-sm text-blue-300" onclick="resetRecognition()">重新识别</button>
                </div>
                
                <div class="bg-white/10 rounded-xl p-4 mb-4">
                    <div class="flex items-center space-x-4">
                        <img id="resultImage" src="" class="w-16 h-16 rounded-lg object-cover">
                        <div class="flex-1">
                            <div class="text-xl font-bold text-green-300" id="fishName">草鱼</div>
                            <div class="text-sm opacity-80" id="fishScientificName">Ctenopharyngodon idella</div>
                            <div class="mt-2">
                                <span class="text-xs bg-green-500/30 px-2 py-1 rounded-full">置信度 95%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 鱼种详细信息 -->
                <div class="space-y-3">
                    <div class="bg-white/10 rounded-xl p-3">
                        <div class="flex items-center space-x-2 mb-2">
                            <i class="fas fa-info-circle text-blue-300"></i>
                            <span class="font-medium">基本信息</span>
                        </div>
                        <div class="text-sm opacity-80 space-y-1">
                            <p><strong>分类：</strong>鲤科草鱼属</p>
                            <p><strong>体长：</strong>一般30-120cm</p>
                            <p><strong>重量：</strong>1-30kg</p>
                            <p><strong>分布：</strong>中国各大水系</p>
                        </div>
                    </div>

                    <div class="bg-white/10 rounded-xl p-3">
                        <div class="flex items-center space-x-2 mb-2">
                            <i class="fas fa-fish text-green-300"></i>
                            <span class="font-medium">生活习性</span>
                        </div>
                        <div class="text-sm opacity-80">
                            <p>草鱼是典型的草食性鱼类，喜欢生活在水体中下层，水温适宜时在水草丰富的敞水区活动觅食。</p>
                        </div>
                    </div>

                    <div class="bg-white/10 rounded-xl p-3">
                        <div class="flex items-center space-x-2 mb-2">
                            <i class="fas fa-bullseye text-orange-300"></i>
                            <span class="font-medium">钓鱼技巧</span>
                        </div>
                        <div class="text-sm opacity-80 space-y-1">
                            <p><strong>最佳时间：</strong>春末到秋初，水温18-30°C</p>
                            <p><strong>推荐饵料：</strong>玉米、麦粒、嫩草叶、专用草鱼饵</p>
                            <p><strong>钓位选择：</strong>水草边缘、入水口附近</p>
                            <p><strong>钓法技巧：</strong>底钓为主，可适当浮钓</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 常见鱼种 -->
        <div class="glass-effect rounded-2xl p-4 mb-6 text-white">
            <h2 class="text-lg font-semibold mb-4">常见鱼种</h2>
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-white/10 rounded-xl p-3 card-hover" onclick="showFishInfo('crucian')">
                    <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=200&fit=crop" 
                         class="w-full h-16 object-cover rounded-lg mb-2">
                    <div class="text-sm font-medium">鲫鱼</div>
                    <div class="text-xs opacity-80">底层鱼类</div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover" onclick="showFishInfo('grass_carp')">
                    <img src="https://images.unsplash.com/photo-1544552866-d3ed42536cfd?w=300&h=200&fit=crop" 
                         class="w-full h-16 object-cover rounded-lg mb-2">
                    <div class="text-sm font-medium">草鱼</div>
                    <div class="text-xs opacity-80">中下层鱼类</div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover" onclick="showFishInfo('black_fish')">
                    <img src="https://images.unsplash.com/photo-1535591273668-578e31182c4f?w=300&h=200&fit=crop" 
                         class="w-full h-16 object-cover rounded-lg mb-2">
                    <div class="text-sm font-medium">黑鱼</div>
                    <div class="text-xs opacity-80">凶猛鱼类</div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover" onclick="showFishInfo('carp')">
                    <img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=300&h=200&fit=crop" 
                         class="w-full h-16 object-cover rounded-lg mb-2">
                    <div class="text-sm font-medium">鲤鱼</div>
                    <div class="text-xs opacity-80">底层鱼类</div>
                </div>
            </div>
        </div>

        <!-- 识别历史 -->
        <div class="glass-effect rounded-2xl p-4 text-white">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold">识别历史</h2>
                <button class="text-sm text-blue-300">查看全部</button>
            </div>
            
            <div class="space-y-3">
                <div class="bg-white/10 rounded-xl p-3 card-hover">
                    <div class="flex items-center space-x-3">
                        <img src="https://images.unsplash.com/photo-1544552866-d3ed42536cfd?w=40&h=40&fit=crop" 
                             class="w-10 h-10 rounded-lg object-cover">
                        <div class="flex-1">
                            <div class="font-medium">草鱼</div>
                            <div class="text-sm opacity-80">今天 14:30</div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm text-green-300">95%</div>
                            <div class="text-xs opacity-80">置信度</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover">
                    <div class="flex items-center space-x-3">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=40&h=40&fit=crop" 
                             class="w-10 h-10 rounded-lg object-cover">
                        <div class="flex-1">
                            <div class="font-medium">鲫鱼</div>
                            <div class="text-sm opacity-80">今天 12:15</div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm text-green-300">92%</div>
                            <div class="text-xs opacity-80">置信度</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white/10 rounded-xl p-3 card-hover">
                    <div class="flex items-center space-x-3">
                        <img src="https://images.unsplash.com/photo-1535591273668-578e31182c4f?w=40&h=40&fit=crop" 
                             class="w-10 h-10 rounded-lg object-cover">
                        <div class="flex-1">
                            <div class="font-medium">黑鱼</div>
                            <div class="text-sm opacity-80">昨天 16:20</div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm text-green-300">89%</div>
                            <div class="text-xs opacity-80">置信度</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 鱼种信息模态框 -->
    <div id="fishInfoModal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" onclick="closeFishInfoModal()"></div>
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-semibold" id="modalFishName">鱼种信息</h3>
                <button onclick="closeFishInfoModal()" class="text-gray-400 text-xl">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div id="modalContent">
                <!-- 动态内容将在这里显示 -->
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-gray-200">
        <div class="flex items-center justify-around p-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-map text-xl"></i>
                <span class="text-xs mt-1">地图</span>
            </button>
            <button class="flex flex-col items-center p-2 text-blue-500">
                <i class="fas fa-plus-circle text-2xl"></i>
                <span class="text-xs">记录</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-bell text-xl"></i>
                <span class="text-xs mt-1">通知</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </button>
        </div>
    </div>

    <script>
        function openCamera() {
            // 模拟拍照过程
            simulateRecognition('camera');
        }

        function selectFromGallery() {
            // 模拟从相册选择
            simulateRecognition('gallery');
        }

        function simulateRecognition(source) {
            const recognitionArea = document.getElementById('recognitionArea');
            const resultArea = document.getElementById('resultArea');
            
            // 显示加载状态
            recognitionArea.innerHTML = `
                <div class="mb-6">
                    <i class="fas fa-spinner fa-spin text-6xl mb-4"></i>
                    <h2 class="text-xl font-semibold mb-2">正在识别中...</h2>
                    <p class="text-sm opacity-80">AI正在分析图像，请稍候</p>
                </div>
            `;

            // 模拟识别延迟
            setTimeout(() => {
                recognitionArea.classList.add('hidden');
                resultArea.classList.remove('hidden');
                
                // 设置识别结果
                document.getElementById('resultImage').src = 'https://images.unsplash.com/photo-1544552866-d3ed42536cfd?w=60&h=60&fit=crop';
            }, 2000);
        }

        function resetRecognition() {
            const recognitionArea = document.getElementById('recognitionArea');
            const resultArea = document.getElementById('resultArea');
            
            resultArea.classList.add('hidden');
            recognitionArea.classList.remove('hidden');
            
            // 重置识别区域内容
            recognitionArea.innerHTML = `
                <div class="mb-6">
                    <i class="fas fa-camera text-6xl mb-4 pulse-animation"></i>
                    <h2 class="text-xl font-semibold mb-2">拍照识别鱼种</h2>
                    <p class="text-sm opacity-80">将鱼儿对准镜头，AI将自动识别鱼种并提供详细信息</p>
                </div>
                <div class="flex flex-col space-y-3">
                    <button class="bg-white/20 backdrop-blur-lg rounded-xl py-3 px-6 font-medium card-hover" onclick="openCamera()">
                        <i class="fas fa-camera mr-2"></i>拍照识别
                    </button>
                    <button class="bg-white/20 backdrop-blur-lg rounded-xl py-3 px-6 font-medium card-hover" onclick="selectFromGallery()">
                        <i class="fas fa-image mr-2"></i>从相册选择
                    </button>
                </div>
            `;
        }

        function showFishInfo(fishType) {
            const modal = document.getElementById('fishInfoModal');
            const modalFishName = document.getElementById('modalFishName');
            const modalContent = document.getElementById('modalContent');
            
            const fishData = {
                crucian: {
                    name: '鲫鱼',
                    scientificName: 'Carassius auratus',
                    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=200&fit=crop',
                    info: '鲫鱼是底层杂食性鱼类，适应性强，分布广泛。',
                    tips: '使用蚯蚓、面食等饵料，选择浅水区域的草边钓鱼效果最佳。'
                },
                grass_carp: {
                    name: '草鱼',
                    scientificName: 'Ctenopharyngodon idella',
                    image: 'https://images.unsplash.com/photo-1544552866-d3ed42536cfd?w=300&h=200&fit=crop',
                    info: '草鱼是典型的草食性鱼类，生长快，个体大。',
                    tips: '使用玉米、麦粒等植物性饵料，在水草丰富的区域钓鱼。'
                },
                black_fish: {
                    name: '黑鱼',
                    scientificName: 'Channa argus',
                    image: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?w=300&h=200&fit=crop',
                    info: '黑鱼是凶猛的肉食性鱼类，喜欢栖息在有水草的区域。',
                    tips: '使用活饵或路亚假饵，选择水草密集的区域，动作要轻。'
                },
                carp: {
                    name: '鲤鱼',
                    scientificName: 'Cyprinus carpio',
                    image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=300&h=200&fit=crop',
                    info: '鲤鱼是底层杂食性鱼类，警觉性高，力气大。',
                    tips: '使用玉米、麦粒、专用鲤鱼饵，选择深水区域，保持安静。'
                }
            };
            
            const fish = fishData[fishType];
            modalFishName.textContent = fish.name;
            modalContent.innerHTML = `
                <img src="${fish.image}" class="w-full h-48 object-cover rounded-lg mb-4">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-semibold mb-2">基本信息</h4>
                        <p class="text-sm text-gray-600">学名：${fish.scientificName}</p>
                        <p class="text-sm text-gray-600 mt-2">${fish.info}</p>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2">钓鱼技巧</h4>
                        <p class="text-sm text-gray-600">${fish.tips}</p>
                    </div>
                </div>
            `;
            
            modal.classList.remove('hidden');
        }

        function closeFishInfoModal() {
            document.getElementById('fishInfoModal').classList.add('hidden');
        }
    </script>
</body>
</html> 